@charset "utf-8";
@import "compass";
@import "common";
//订单详情进度小icon
$order_detail-spacing: 10px;
$order_detail-sprite-dimensions:true;// false 生成的图片精灵要不要带长宽
@import "order_detail/*.png";



/*------------订单详情页-----------*/
//订单详情进度 合同查看弹窗也用到
.progress{
  ul.description {width: 85%;margin: 12px auto;padding: 0;
    li {position: relative; @include float-left;text-align: center;
      dl {position: relative;margin-top: 15px;
        &:before {content: "";position: absolute;top: -8px;left: 50%;margin-left: -8px;width: 16px;height: 16px;background: #959fb2;border-radius: 100%;z-index: 2;border: 3px solid #fff;}
      }
      dt{padding-top: 20px;border-top: 2px solid #c6ccd2;color: $font-info-color-light;font-weight: bold;}
      dd{padding: 5px 0 ;color: $font-info-color-light;}

    }
    li.now{
      dl:before{top: -11px;margin-left: -10px;width: 21px;height: 21px;background: $bg-primary;border-width: 4px;}
      dt {border-top-color: $border-primary-color;}
    }
    li.pass{
      dl:before{background: $bg-primary;}
      dt {border-top-color: $border-primary-color;}
    }/*原点的三个状态*/
    .step1 img{@include order_detail-sprite(step1);}
    .step2 img{@include order_detail-sprite(step2);}
    .step2-1 img{@include order_detail-sprite(step2-1);}
    .step3 img{@include order_detail-sprite(step3);}
    .step4 img{@include order_detail-sprite(step4);}
    .step1-1 img{@include order_detail-sprite(step1-1);}
    &.offline{
      li{width: (100%/5);}
      &.step0 {li:first-child{@extend li.now;}}
      &.step1 {
        li:first-child{@extend li.pass;}
        li:nth-child(2){@extend li.now;}
      }
      &.step2 {
        li:first-child,
        li:nth-child(2){@extend li.pass;}
        li:nth-child(3){@extend li.now;}
      }
      &.step3 {
        li:first-child,
        li:nth-child(2),
        li:nth-child(3){@extend li.pass;}
        li:nth-child(4){@extend li.now;}
      }
      &.step4 {
        li:first-child,
        li:nth-child(2),
        li:nth-child(3),
        li:nth-child(4){@extend li.pass;}
        li:nth-child(5){@extend li.now;}
      }
    }
    &.online{
      li{width: (100%/4);}
      &.step0 {li:first-child{@extend li.now;}}
      &.step2 {
        li:first-child{@extend li.pass;}
        li:nth-child(2){@extend li.now;}
      }
      &.step3 {
        li:first-child,
        li:nth-child(2){@extend li.pass;}
        li:nth-child(3){@extend li.now;}
      }
      &.step4 {
        li:first-child,
        li:nth-child(2),
        li:nth-child(3){@extend li.pass;}
        li:nth-child(4){@extend li.now;}
      }
    }
  }

}

/*--------------------合同信息页--------------------*/
.contract-info {padding: 10px 15px; @extend .progress;
  .header2 {position: relative;padding-bottom: 18px;margin-bottom: 17px;border-bottom: 1px solid #e5e5e5;
    h2 {color: #666;  font-weight: normal;font-size: 16px;}

  }
.tableLayer {@extend .uc_table;margin: 15px 0 20px;width: 100%;  text-align: center;  border: 1px solid #e5e5e5;
    td{vertical-align: top;}
    dl.row {@extend .clearfix;padding: 10px 0 ;}
    dt {float: left;width: 50%;text-align: right;}
    dd {float: left;width: 50%;text-align: left;color: $font-info-color;}
  }
}
.contract-info ul.description.online {
    &.step0 {li:first-child{@extend li.now;}}
    &.step1 {
      li:first-child{@extend li.pass;}
      li:nth-child(2){@extend li.now;}
    }
    &.step3 {
      li:first-child,
      li:nth-child(2){@extend li.pass;}
      li:nth-child(3){@extend li.now;}
    }
    &.step4 {
      li:first-child,
      li:nth-child(2),
      li:nth-child(3){@extend li.pass;}
      li:nth-child(4){@extend li.now;}
    }
}


